import { Image, Layout, Menu, MenuProps, Space } from "antd";
import { Header } from "antd/es/layout/layout";
import { FC, useState } from "react";
import { useLocation, useNavigate } from "react-router-dom";
import MessageButton from "./message/MessageButton";
import { getPreviewUrl } from "@utils/WeStudyUtil";

type MenuItem = Required<MenuProps>["items"][number];

const items: MenuItem[] = [
  {
    label: "学习",
    key: "study",
  },
  {
    label: "探索",
    key: "explore",
  },
  {
    label: "社区",
    key: "community",
  },
  
  {
    label: "管理员",
    key: "admin",
  }
];

const HomePageMenu: FC = () => {
  const location = useLocation();
  const currentPath = location.pathname.replaceAll("/", "");
  const [current, setCurrent] = useState(currentPath);
  const navigate = useNavigate();

  const onClick: MenuProps["onClick"] = (e) => {
    var id = e.key;
    setCurrent(id);
    navigate("/" + id);
  };

  const coverImage = getPreviewUrl() + "fb007e80a3b94ef1a12a7e53088be62c";

  return (
    <Layout>
      <Header
        style={{
          background: "white",
          display: "flex",
          height: 60,
          justifyContent: "space-between",
          alignItems: "center",
        }}
      >
        <Space>
          <Image src={coverImage} preview={false} width={200} />
          <Menu
            onClick={onClick}
            selectedKeys={[current]}
            defaultSelectedKeys={["study"]}
            mode="horizontal"
            items={items}
          />
        </Space>
        <MessageButton />
      </Header>
    </Layout>
  );
};

export default HomePageMenu;
